const path = require('path');
const webpack = require('webpack');  //启用热更新的 第 2 步
const VueLoaderPlugin =require('vue-loader/lib/plugin');

const htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(dir) {
　　return path.join(__dirname, dir);
}
module.exports={
    //入口文件的配置项
    entry: path.join(__dirname, './src/main.js'),
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.join(__dirname,'./dist'),
        //输出的文件名称
        filename:'bundle.js'
    },
    devtool: 'inline-source-map',
    mode:"development",//注意最新版本必须加mode，否则会报错
    //模块：例如解读CSS,图片如何转换，压缩
    module:{
        rules: [
            {test: /\.css$/ ,use: ['style-loader','css-loader']}, //.css文件配置
            {test: /\.less$/ ,use: ['style-loader','css-loader','less-loader']}, //.less文件配置
            {test: /\.scss$/ ,use: ['style-loader','css-loader','sass-loader']}, //.scss文件配置
            {test: /\.(jpg|png|jepg)$/ ,use: 'url-loader?limit=1000&[hash:8]-[name].[ext]'}, //url文件配置
            //limit:xxx(小于等于这个自定义数值，取消base64编译) name取原名
            {test: /\.(ttf|eot|svg|woff|woff2)$/ ,use: 'url-loader'}, //字体图标

            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },//配置babel来转换高级的es语法

            {test: /\.vue$/, use: 'vue-loader'} //处理 .vue 文件的 loader

        ]
    },
    //插件，用于生产模版和各项功能
    plugins:[
        //new webpack.HotModuleReplacementPlugin(), //new 一个热更新的 模块对象，这是热更新的第 3 步
        new htmlWebpackPlugin({//创建一个在内存中生成 html 页面的插件
            template: path.join(__dirname, './src/index.html'), //指定 模版页面，将来会根据指定的路径，去生成内存中的页面
            filename: 'index.html' //指定生成的页面的名称
        }),
        new VueLoaderPlugin()
    ],
    //配置webpack开发服务功能
    //推荐直接写在 package.js 的dev："webpack-dev-server 这里～～～"
    devServer:{
        // open: true,//自动打开浏览器
        // port: 3000,//设置启动的运行端口
        // contentBase: 'src', //指定托管的根目录
        // hot: true //启动热更新的 第 1 步 
    },
    resolve: {
        alias: {//修改 vue 被导入时候包的路径
            "vue$": "vue/dist/vue.js",
            '@': resolve('src')
        }
    }
}

